<template>
    <div class="indexcontiner"> 
        <!-- 数据显示 -->
        <h3 style="margin-right: 80%;color: #66ccff;">首页导航栏管理</h3>
        <div class="header">
            <el-form :inline="true" @submit.native.prevent>
                <el-form-item lable="添加导航">
                    <el-select v-model="typeId" filterable placeholder="请选择">
                        <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button @click="addIndexTitle()">添加</el-button>
                </el-form-item>
            </el-form>
            <el-table
                :data="indexTitle"
                style="width: 100%"
                :row-class-name="tableRowClassName">
                
                <el-table-column
                prop="type"
                label="类型"
                width="180">
                </el-table-column>
                
                <el-table-column
                label="操作"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button type="danger" @click="removeTitles(scope.row.id)" icon="el-icon-delete" circle></el-button>
                </template>
                </el-table-column>

            </el-table>
        </div>
        
        <!-- 数据显示 -->
        <h3 style="margin-right: 80%;color:#66ccff">首页店铺Banner管理</h3>
        <div class="content">
            <el-form :inline="true" @submit.native.prevent>
                <el-form-item lable="添加Banner">
                    <el-select v-model="shopId" filterable placeholder="请选择">
                        <el-option
                            v-for="item in shopOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button @click="addIndexBanner()">添加</el-button>
                </el-form-item>
            </el-form>
                <el-table
                ref="multipleTable"
                :data="indexBanner"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">

                <el-table-column
                prop="name"
                label="商店名"
                width="200">
                </el-table-column>

                <el-table-column
                label="商店封面"
                width="300"
                >
                <template slot-scope="scope">
                    <img class="avatar" :src="scope.row.cover">
                </template>
                </el-table-column>

                <el-table-column
                prop="description"
                label="商店简介"
                width="100">
                </el-table-column>
                
                
                <el-table-column
                prop="owner"
                label="店主"
                width="100">
                </el-table-column>
                
                <el-table-column
                label="操作"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button type="danger" @click="removeBanner(scope.row.id)" icon="el-icon-delete" circle></el-button>
                </template>
                </el-table-column>
            </el-table>
        </div>
     </div>
</template>

<script>
import shop from '@/api/shop'
import goodType from '@/api/goodType';
import indexp from '@/api/indexp'
export default{
    data(){
        return{
            indexTitle:[],
            indexBanner:[],
            shopOptions:[],
            typeOptions:[],
            shopId:'',
            typeId:''
        }
    },
    created() {
        this.init();
    },
    methods:{
        init(){
            this.getIndexBanner();
            this.getAllShops();
            this.getIndexTitle();
            this.getAllTypes();
        },
        //查询首页标签
        getIndexTitle(){
            //查询首页标签
            indexp.getTitles()
                .then(response=>{
                    //根据标签id查找具体数据
                    var type = response.data.typeId;
                    goodType.gets(type)
                        .then(response=>{
                            this.indexTitle = response.data.list;
                        })
                })
        },
        //查询首页banner
        getIndexBanner(){
            indexp.getShops()
                .then(response=>{
                    var shopIds = response.data.shopIds;
                    shop.gets(shopIds)
                        .then(response=>{
                            this.indexBanner = response.data.list;
                        })
                })
        },
        //查询店铺
        getAllShops(){
            shop.getAll()
                .then(response=>{
                    this.shopOptions = JSON.parse(JSON.stringify( response.data.list).replace(/id/g,"value"))
                })
        },
        //查询所有一级分类
        getAllTypes(){
            goodType.getLastType()
                .then(response=>{
                    this.typeOptions = JSON.parse(JSON.stringify( response.data.list).replace(/id/g,"value"))
                })
        },
        //删除首页标签
        removeTitles(id){
          indexp.deleteTitle(id)
            .then(response=>{
                this.$message({
                        message: '修改成功',
                        type: 'success'
                });
                this.getIndexTitle();
            })  
        },
        //删除首页店铺
        removeBanner(id){
            indexp.deleteShop(id)
                .then(response=>{
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.getIndexBanner() 
                }) 
        },
        //增加首页标签
        addIndexTitle(){
            if(this.typeId == null || this.typeId.length < 1 ){
                this.$message({
                        message: '参数错误',
                        type: 'error'
                    });
                return;
            }
            indexp.addTitle(this.typeId)
                .then(response=>{
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.getIndexTitle();
                    this.typeId=null;
                })
        },
        //增加首页banner
        addIndexBanner(){
            if(this.shopId == null || this.shopId.length < 1 ){
                this.$message({
                        message: '参数错误',
                        type: 'error'
                    });
                return;
            }
            indexp.addShop(this.shopId)
                .then(response=>{
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.shopId=null;
                    this.getIndexBanner();
                })
        }
    }
}
</script>

<style>
.indexcontiner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .header,
  .content,
  .footer {
    width: 80%;
    padding: 20px;
    align-content: center;
    text-align: center;
  }
.avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>